<template>
    <div class="body">
        <NavHeader></NavHeader>
        <div class="wrapper">
            <div class="s_header">
                <span class="s_flash">我的课程</span>
                <el-button  type="text" @click="open" class="s_add"><i class="el-icon-circle-plus"></i>添加课程</el-button>
            </div>
            <div class="s_cource clearfix">
                <div @click="opendetail()" class="s_box" v-for="(item,index) in coursedata[0]" :key="index">
                    <div class="s_photo"></div>
                    <div class="s_name_box">
                        <p class="s_name">{{item.c_name}}</p>
                        <p class="s_teacher">{{item.id}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import NavHeader from '../components/NavHeader.vue'
import {Icon,Button,MessageBox}  from 'element-ui'
export default {
    name:"index",
    components:{
      NavHeader,
      [Icon.name]:Icon,
      [Button.name]:Button,
      [MessageBox.name]:MessageBox,
    },
    data(){
        return{
           coursedata:[],
           s_id:localStorage.getItem("s_id")
        }
    },
    methods:{
       open() {
        this.$prompt('请输入课程码', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /\S/,
          inputErrorMessage: "课程码不能为空"
        }).then(({ values }) => {
          this.axios.post('/course/add',{
            s_id:this.s_id,
            value: values
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
      },
       opendetail(){
         this.$router.push({
            path:'/course/1'
         })
      },
      //请求课程
      async recourse(id){
       const res = await this.axios.post(`/course/${id}`)
       if(res.data.code === 1){
         this.coursedata.push(res.data.data)
       }
      }
    },
    mounted(){
        this.recourse(this.s_id);
    }
}
</script>

<style lang="scss">
    .body{
        background-color: #f5f5d5;
        .wrapper{
        width: 70%;
        min-height: 900px;
        background-color: white;
        margin-left: 15%;
        margin-right: 15%;
        padding-top: 50px;
        .s_header{
            width: 90%;
            height: 60px;
            border-bottom: 1px solid #ccc;
            margin-left: 5%;
            margin-right: 5%;
            font-size: 24px;
            position: relative;
            .s_flash{
                display: inline-block;
                height: 20px;
                line-height: 20px;
                position: absolute;
                bottom: 20%;
                left: 5%;
            }
            .s_add{
                display: inline-block;
                height: 20px;
                line-height: 20px;
                position: absolute;
                right: 5%;
                bottom: 20%;
                font-size: 20px;
                color: #09f;
            }
        }
        .s_cource{
            width: 90%;
            height: auto;
            margin-top: 20px;
            margin-left: 5%;
            margin-right: 5%;
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            .s_box{
                width: 30%;
                height: 240px;
                margin-bottom: 10px;
                margin-left: 2.5%;
                margin-top: 20px;
                border: 1px solid #ccc;
                cursor: pointer;
                overflow: hidden;
                .s_photo{
                    width: 100%;
                    height: 160px;
                    border-bottom: 1px solid #ccc;
                    background: url(../assets/imgs/source.jpeg) no-repeat;
                }
                .s_name_box{
                    width: 100%;
                    height: 80px;
                    background-color: #f3f3f3;
                    .s_name{
                        font-size: 20px;
                        margin: -1px 10px 5px 10px;
                    }
                    .s_teacher{
                        font-size: 12px;
                        margin-left: 10px;
                        color: #666666;
                    }
                }
            }
        }
    }
    }
</style>